<template>
	<view>
		<Header :isBack="true">
			<block slot="content">{{title}}</block>
		</Header>
		<view class="content">
			<view class="header">
				为了资金安全，只可绑定当前账号本人的银行卡
			</view>
			<bjx-form class="form" :rules="rules" :form="formData" ref="form">
				<view class="user-login">
					<bjx-form-item class="user-login-user" label-type="inline" prop="banknumber" label="卡号">
						<view slot="label" class="item-slot">
							<text>卡号</text>
						</view>
						<input class="user-login-user-content" type="text" value="" placeholder="请输入银行卡号"
							v-model="formData.banknumber" name="banknumber" maxlength="300" />
					</bjx-form-item>

					<bjx-form-item class="user-login-user" label-type="inline" prop="bankname" label="开户行">
						<view slot="label" class="item-slot">
							<text>开户行</text>
						</view>
						<text @tap="selectBanks" v-if="formData.bankname == '请选择开户银行'"
							style="color: #999999;">{{formData.bankname}}</text>
						<text @tap="selectBanks" v-else>{{formData.bankname}}</text>
					</bjx-form-item>

					<bjx-form-item class="user-login-user" label-type="inline" prop="bankholder" label="持卡人">
						<view slot="label" class="item-slot">
							<text>持卡人</text>
						</view>
						<input class="user-login-user-content" type="text" value="" placeholder="请输入持卡人姓名"
							v-model="formData.bankholder" name="bankholder" />
					</bjx-form-item>

					<bjx-form-item class="user-login-user" label-type="inline" prop="mobile" label="手机号码">
						<view slot="label" class="item-slot">
							<text>手机号码</text>
						</view>
						<input class="user-login-user-content" type="text" value="" placeholder="请输入手机号码"
							v-model="formData.mobile" name="mobile" />
					</bjx-form-item>

					<bjx-form-item class="user-login-user" label-type="inline" prop="code" label="短信验证码">
						<view slot="label" class="item-slot">
							<text>短信验证码</text>
						</view>
						<view class="get-mobile-code">
							<input class="user-login-user-content" type="text" value="" placeholder="请输入短信验证码"
								v-model="formData.code" name="code" style="max-width: 60%;" />
							<text class="mobile-login-code-btn" @tap="getCode">{{codeTip}}</text>
						</view>
					</bjx-form-item>
				</view>
				<view class="login" @tap="comSubmit">
					确认添加
				</view>
			</bjx-form>

			<view class="mark" v-show="isShow">
				<view class="banks-list">
					<view class="banks-list-title">
						<text>选择开户银行</text>
						<image src="@/static/images/guanbi.png"
							style="width:23rpx;height:23rpx;position: absolute;right:50rpx;" @tap="cancle"></image>
					</view>
					<scroll-view scroll-y="true" class="banks-list-content">
						<view class="banks-list-item" v-for="(item,index) in bankList"
							@tap="select(item.id,item.bank_name)">
							{{item.bank_name}}
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				cate: 1,
				title: '添加银行卡',
				codeTip: '获取验证码',
				numShow: false,
				noClick: true,
				second: 60,
				isShow: false,
				bankList: [],

				formData: {
					banknumber: '',
					bankholder: '',
					mobile: '',
					code: '',
					selectId: 0,
					bankname: '请选择开户银行',
				},

				rules: {
					banknumber: {
						required: true,
						rule: 'type:string|length:~,20',
						message: {
							length: '卡号不能超过20个字符'
						}
					},
					bankname: {
						required: true,
						rule: 'type:string'
					},
					bankholder: {
						required: true,
						rule: 'type:string'
					},
					mobile: {
						required: true,
						rule: 'length:11',
						message: {
							reg: '请填写正确格式的手机号码'
						}
					},
					code: {
						required: true,
						rule: 'type:string',
						message: {
							type: '短信验证码不能为空'
						}
					}
				},
			}
		},
		components: {

		},

		onLoad() {
			//判断是否登录
			let result = this.$api.isLogin();
			if (result === false) {
				return false;
			}

			this.loadData();
		},

		methods: {
			...mapMutations(['login']),
			async loadData() {
				let url = '/banklist';
				let res = await this.$myRequest({
					url: url,
					methods: 'post'
				})

				this.bankList = res.data.data;
				// console.log(this.bankList)
			},

			async getCode() {
				//防止连续点击
				let that = this;
				if (that.noClick) {
					that.noClick = false;
					setTimeout(function() {
						that.noClick = true;
					}, 2000)
				} else {
					return false;
				}
				if (this.numShow == true) {
					this.$api.msg(this.second + 's之内不可再次发送');
					return false;
				}
				if (!this.formData.mobile) {
					this.$api.msg('请输入手机号码');
					return false;
				}

				let res = await this.$myRequest({
					url: '/getCode/' + this.formData.mobile
				})

				this.$api.msg(res.data.msg, 'success')
				this.codeTip = '60s'
				this.numShow = true
				var interval = setInterval(() => {
					--this.second;
					this.codeTip = this.second + 's'
					if (this.second <= 0) {
						clearInterval(interval);
						this.codeTip = '获取验证码';
						this.numShow = false;
						this.second = 60
					}
				}, 1000)
			},

			async selectBanks() {
				this.isShow = true;
			},

			async cancle() {
				this.isShow = false;
			},

			async addBank() {
				uni.navigateTo({
					url: '/pages2_1/pages/add-bank/add-bank'
				})
			},

			async select(id, name) {
				this.formData.selectId = id;
				this.formData.bankname = name;
				this.isShow = false;
			},

			async comSubmit() {
				this.$refs.form.validate(val => {
					if (val == true) {
						let dataObj = {
							token: uni.getStorageSync('token'),
							banknumber: this.formData.banknumber,
							bankid: this.formData.selectId,
							bankholder: this.formData.bankholder,
							mobile: this.formData.mobile,
							code: this.formData.code
						};
						this.submit(dataObj);
					}
				})

			},

			//登录提交
			async submit(dataObj) {
				let res = await this.$myRequest({
					url: '/addBank',
					data: dataObj,
					methods: 'post'
				})

				if (res.data.status == 1) {
					uni.$emit('changeBanksLists')
					this.$api.msg(res.data.msg, 'success');
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						});

					}, 1500)
				}
			},
		}
	}
</script>
<style>
	page {
		background-color: #f7f7f7;
		font-size: 30rpx;
	}
</style>
<style lang="scss" scoped>
	.head-img {
		height: 248rpx;
		width: 100%;
	}

	.content {
		// #ifdef APP-PLUS
		padding-top: 160rpx;
		// #endif

		// #ifdef H5
		padding-top: 100rpx;
		// #endif

		// #ifdef MP-WEIXIN
		padding-top: 160rpx;
		// #endif

		.header {
			height: 82rpx;
			line-height: 82rpx;
			padding: 0 42rpx;
			color: #f3441a;
		}
	}

	.form {
		.user-login {
			border-top: 1px solid #f3f3f6;

			.user-login-user {
				height: 78rpx;
				line-height: 20rpx;
				padding: 0 30rpx;
				display: flex;
				align-items: center;
				border-bottom: 1px solid #f3f3f6;
				background-color: #fff;

				.user-login-user-content {
					display: inline-block;
					font-size: 30rpx;
					height: 78rpx;
					line-height: 78rpx;
					// width: 60%;
				}
			}
		}
	}

	.login {
		margin: 26rpx 30rpx;
		background-color: #f3431a;
		height: 74rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 15rpx;
		color: #fff;
		letter-spacing: 19rpx;
	}

	.bjx-form-item .label-inline[data-v-43b7464c] {
		padding-top: 0rpx !important;
	}

	.get-mobile-code {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;

	}

	.mobile-login-code-btn {
		background-color: #ee7f06;
		border-radius: 8rpx;
		color: #fff;
		height: 60rpx;
		line-height: 60rpx;
		padding: 0 10rpx;
		font-size: 28rpx;

	}

	.mark {
		position: absolute;
		height: 100%;
		width: 100%;
		top: 0rpx;
		bottom: 0rpx;
		background: rgba(0, 0, 0, 0.5);
		box-shadow: 2px -3px 100px -5px #FFFFFF;

		.banks-list {
			position: fixed;
			// height: 500rpx;
			bottom: 0rpx;
			background-color: #fff;
			width: 100%;

			.banks-list-title {
				height: 102rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-bottom: 1px solid #ebebeb;
				position: relative;
			}

			.banks-list-content {
				padding: 30rpx 0;
				height: 400rpx;

				.banks-list-item {
					height: 48rpx;
					line-height: 48rpx;
					display: flex;
					justify-content: center;
				}

				.banks-list-button {
					padding-top: 20rpx;
					display: flex;
					justify-content: center;
				}
			}
		}
	}

	.label-con {
		width: 500upx !important;
	}

	.item-slot {
		width: 80px;
		text-align: justify;
		text-align-last: justify
	}
</style>
